<template>
	<el-tree :data="data" :props="defaultProps" :default-expand-all="true">
		<template #default="{ node, data }">
			<span class="custom-tree-node">
				<span class="bold">{{ node.label }}</span>
				<el-button v-if="data.path" type="primary" link @click="handleNodeClick(data.path)"
					>下载
					<el-icon class="el-icon--right"><Download /></el-icon>
				</el-button>
			</span>
		</template>
	</el-tree>
</template>

<script>
import { dataRequest as api } from '@/api/api'
export default {
	props: ['data'],
	data() {
		return {
			defaultProps: {
				children: 'courseware',
				label: 'title',
			},
		}
	},

	methods: {
		async handleNodeClick(data) {
			console.log(data)
			let arr = await api(['Coursewaredownloadaddress', data])
			if (arr.code == 200) {
				window.open(arr.data)
				console.log(arr.data)
			} else {
				this.$message.error(arr.data)
			}
			// 这里寻找上级附件 把视频地址传给父组件  父组建再传给视频组建
		},
	},
	mounted() {
		// 生命周期:
		// console.log(this.data)
	},
}
</script>

<style>
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
.Gray {
	color: var(--el-color-info-light-3) !important;
}
</style>
